<template>
  <div class="userNewAddress">
    <!--地址信息-->
    <div class="infoMain">
      <el-row :span="24">
        <el-col :span="6" class="name">收货人姓名</el-col>
        <el-col :span="18"><el-input v-model="user.name" placeholder="请输入姓名"></el-input></el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="6" class="name">手机号码</el-col>
        <el-col :span="18"><el-input v-model="user.phone" placeholder="请输入手机号码"></el-input></el-col>
      </el-row>
      <el-row :span="24" class="area">
        <el-col :span="24" class="name">所在地区</el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="8">
        <el-select v-model="add[0]" placeholder="选择省" class="select-provice" @change="selectProvice">
            <el-option v-for="item in address.provice" :key="item.index" :label="item.province" :value="item.provinceid"  @click.native="changeProvice(item)"></el-option>
        </el-select>
        </el-col>
         <el-col :span="8">
        <el-select v-model="add[1]" placeholder="选择市" class="select-provice" @change="selectCity">
            <el-option v-for="item in address.city" :key="item.index" :label="item.city" :value="item.cityid"  @click.native="changeCity(item)"></el-option>
        </el-select>
        </el-col>
         <el-col :span="8">
        <el-select v-model="add[2]" placeholder="选择区" class="select-provice">
            <el-option v-for="item in address.area" :key="item.index" :label="item.area" :value="item.areaid"></el-option>
        </el-select>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="6" class="name">街道地址</el-col>
        <el-col :span="18"><el-input v-model="user.addr" placeholder="请输入街道地址"></el-input></el-col>
      </el-row>
    </div>
    <!--设为默认地址-->
    <el-row :span="24" class="default">
      <div class="left name" >设为默认地址</div>
      <div class="right">
        <el-switch v-model="defaultadd" on-text="" off-text="" on-color="#13ce66"
                   off-color="gray">
        </el-switch>
      </div>
    </el-row>
    <el-button type="success" class="subbtn" @click="addAddress">确认</el-button>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    mounted () {
      this.getprov()
    },
    data () {
      return {
        activeName: '1',
        input: '',
        defaultadd: false,
        user: {},
        add: [],
        address: {
          provice: [],
          city: [],
          area: []
        }
      }
    },
    methods: {
      getSubmit () { // 跳转到
        console.log('BBB')
      },
      addAddress () {
          // 添加收货地址
        this.user.provinceID = this.add[0]
        this.user.cityID = this.add[1]
        this.user.areaID = this.add[2]
        if (this.defaultadd) {
          this.user.isDefault = 1
        }
        this.user.token = this.$store.state.token
        this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserAddr/addAddr.shtml', this.user, { // 头文件及JSON格式设定
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          emulateJSON: true
        }).then((data) => { // 数据获取成功
          this.$message({
            message: '添加地址成功',
            type: 'success',
            duration: 1000,
            showClose: false
          })
          this.$router.push('/user/address')
        }, (ne) => { // 数据获取失败
          this.$message({
            message: '验证码获取失败',
            type: 'error',
            duration: 1000,
            showClose: false
          })
        })
      },
      defaultAdd (addid) {
        //  设置默认收货地址
        this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserAddr/setDefaultAddr.shtml', {id: addid, token: this.$store.state.token}, { // 头文件及JSON格式设定
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          emulateJSON: true
        }).then((data) => { // 数据获取成功
          this.$message({
            message: '验证码获取成功',
            type: 'success',
            duration: 1000,
            showClose: false
          })
        }, (ne) => { // 数据获取失败
          this.$message({
            message: '设置失败',
            type: 'error',
            duration: 1000,
            showClose: false
          })
        })
      },
      getprov () {
        this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserAddr/provinceList.shtml', { // 头文件及JSON格式设定
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          emulateJSON: true
        }).then((data) => { // 数据获取成功
          this.address.provice = data.body
        }, (ne) => { // 数据获取失败
          // this.$message({
          //   message: '验证码获取失败',
          //   type: 'error',
          //   duration: 1000,
          //   showClose: false
          // })
        })
      },
      getcity (id) {
        this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserAddr/cityList.shtml', {provinceID: id}, { // 头文件及JSON格式设定
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          emulateJSON: true
        }).then((data) => { // 数据获取成功
          this.address.city = data.body
        }, (ne) => { // 数据获取失败
          // this.$message({
          //   message: '验证码获取失败',
          //   type: 'error',
          //   duration: 1000,
          //   showClose: false
          // })
        })
      },
      getarea (id) {
        this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserAddr/areaList.shtml', {cityID: id}, { // 头文件及JSON格式设定
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          emulateJSON: true
        }).then((data) => { // 数据获取成功
          this.address.area = data.body
        }, (ne) => { // 数据获取失败
          // this.$message({
          //   message: '验证码获取失败',
          //   type: 'error',
          //   duration: 1000,
          //   showClose: false
          // })
        })
      },
      changeProvice (item) {
        this.$set(this.add, 1, '')
        this.$set(this.add, 2, '')
      },
      changeCity (item) {
        this.$set(this.add, 2, '')
      },
      selectProvice (item) {
        this.getcity(item)
      },
      selectCity (item) {
        this.getarea(item)
      }
    }
  }
</script>

<style lang="scss" type="stylesheet/scss">
  .userNewAddress{
    background-color:#f5f3f3;
    height: 615px;
    text-align: left;
  .el-input__inner{
    border: none;
  }
      .name{
        font-size:14px;
      }

      .subbtn{
        width:80%;
        margin:20px auto;
        display: block;
      }
      .infoMain{
        margin-bottom: 10px;
        background-color: #fff;
          .el-row{
            padding:0 15px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #e3e3e3;
          .infoSelect{
            display: flex;
            padding:0 10px;
          .infoSelectContent{
            flex:1;
                }
              }
          }
          .area{
            text-align:center;
            margin-top:4px;
            height:20px;
            line-height:20px;
            border-bottom:none;
          }
      }
    
  .default{
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    padding: 0 15px;
    display: flex;
    .left{
      flex:1;
    }
  }
  }

</style>
